<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Runface动态精准护肤</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css"/>
		<link rel="stylesheet" href="css/loaders.css">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css"/>
		
		<style>
			html,
			body {background-color: #efeff4;}
			span.mui-icon {font-size: 14px;/*color: #007aff; margin-left: -15px; */padding-right: 10px;}
			.mui-off-canvas-left {color: #fff;}
			.title {margin: 35px 15px 10px;}
			.title+.content {margin: 10px 15px 35px;color: #bbb;text-indent: 1em;font-size: 14px;line-height: 24px;}
			input {color: #000;}
			.mui-bar{background-color: #ff8dae;}
			.mui-off-canvas-left, .mui-off-canvas-right{background: #FFFFFF;}
			.mui-table-view-inverted{background: #ffffff;}
			.mui-table-view-inverted .mui-table-view-cell:after{background-color: #a4b9fa;}
			.mui-table-view-inverted:before{background-color: #FFFFFF;}
			.mui-table-view-inverted:after{background-color: #FFFFFF;}
			.mui-table-view-cell{padding: 13px 15px;color: #595555;}
			.aye{color:#70b2f9;}
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable{background-color: #FFFFFF;}
			.mui-bar.mui-bar-tab{
				background-color: #ff8dae;
			}
			.mui-bar.mui-bar-tab .mui-tab-item.mui-active{
				color: #FFFFFF;
			}
			
			
			
		</style>
	</head>

	<body>
		
		<!-- preloader -->
		<div class="parent">
			<div class="preloader">
				<div class="spinner"></div>
			</div>
		</div>
		<!-- end preloader -->
		
		<!-- header+nav -->
		<!-- 主页面标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-action-menu iconfont icon-renshuicon mui-pull-left" href="#offCanvasSide" style="color: #FFFFFF;" id="bars-bars"></a>
			<a class="mui-icon mui-action-menu iconfont icon-gouwuche mui-pull-right" href="#offCanvasSideCart" id='cart-icon' style="margin-right: 5px;padding-right: 2px;color: #FFFFFF;"><span class="mui-badge mui-badge-danger" style="margin-top: 5px;" id="cartCount">3</span></a>
			<a class="mui-icon mui-action-menu iconfont icon-search mui-pull-right" href="#offCanvasSideSearch" style="margin-right: 0.5rem;color: #FFFFFF;"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">Runface</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon mui-icon-home-filled"></span>
				<span class="mui-tab-label">主页</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon iconfont icon-icon2"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex='2'>
				<span class="mui-icon iconfont icon-paizhao"></span>
				<span class="mui-tab-label">测一测</span>
			</a>
			<a class="mui-tab-item" tabindex='3'>
				<span class="mui-icon iconfont icon-dingzhi"></span>
				<span class="mui-tab-label">定制</span>
			</a>
			<a class="mui-tab-item" tabindex='4'>
				<span class="mui-icon iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
						
		<!-- 脚本 -->
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script src="js/template-web.js"></script>
		<script src="font_icon/iconfont.js"></script>
		<script type="text/javascript">
			// 清除spinner
			var preloader=document.querySelector(".preloader");
			var parent=document.querySelector(".parent");
			parent.removeChild(preloader);
		</script>
		<script>
			var navTitle = null;
			var menu = null,
				mainWebview = null;
			var showMenu = false;
			mui.init({
				gestureConfig: {
					doubletap: true
				},
				swipeBack:false
				
			});
			//预加载的页面
			var pageArray=[
			{
				pageId: "home.html",
				pageUrl: "home.html"
			},
			{
				pageId: "discover.html",
				pageUrl: "discover.html"
			},
			{
				pageId: "camera.html",
				pageUrl: "camera.html"
			},
			{
				pageId: "custom.html",
				pageUrl: "custom.html"
			},
			{
				pageId: "me.html",
				pageUrl: "me.html"
			}
		];
		// 让Header和nav bottom不影响显示的style
			var subPageStyle={
				top: "44px",
				bottom: "50px"
			};
			// 定义当前Webview
			var curBarItemWebview;
			
			 //实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			//界面所有a标签跳转指定href
// 			mui('body').on('tap','a',function(){
// 				document.location.href=this.href;
// 			});
// 			mui('#slider').on('tap','a',function(){
// 				console.log("tap事件触发！");
// 			});
			// mui('.mui-bar-tab').off('tap');

		// H5 plus事件处理
		function plusReady(){
			// 设置系统状态栏背景
			// console.log("方法被调用");
			plus.navigator.setStatusBarBackground( "#ff8dae" );
			// 设置系统状态栏样式为浅色文字
			plus.navigator.setStatusBarStyle( "UIStatusBarStyleBlackOpaque" );
		}
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener('plusready', plusReady, false);
		}

		mui.plusReady(function(){
			// 设置系统状态栏背景
			// plus.navigator.setStatusBarBackground("#FFFFF");
			// 设置系统状态栏样式为浅色文字
			// plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
			
			//获取当前title和当前webview
			navTitle = document.querySelector('.mui-title');
			
			mainWebview = plus.webview.currentWebview();
			mainWebview.addEventListener('maskClick', closeMenu);
			//敲击顶部导航，内容区回到顶部
			document.querySelector('header').addEventListener('doubletap', function() {
				mainWebview.children()[0].evalJS('mui.scrollTo(0, 100)');
			});
			
			//初始化与index有关的页面
			initIndexView();
// 			mainWebview.addEventListener("show", function() {
// 				refreshUserInfo();
// 			});

			//添加登录的监听事件
			window.addEventListener('load-login',function(event){
				console.log("login触发了");
				console.log(event.detail.login);
				mui.openWindow('login.html','login.html',{zindex:9999});
				
			});
			
			//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
			setTimeout(function() {
				menu = mui.preload({
					id: 'index-menu',
					url: 'index-menu.html',
					styles: {
						left: 0,
						width: '70%',
						zindex: -1
					},
					show: {
						aniShow: 'none'
					}
				});
				menu.setStyle({
					mask: 'rgba(0,0,0,0)'
				});
			}, 200);
			
			var isInTransition = false;
			/**
			 * 显示侧滑菜单
			 */
			function openMenu() {
				if(isInTransition) {
					return;
				}
				if(!showMenu) {
					//侧滑菜单处于隐藏状态，则立即显示出来；
					isInTransition = true;
					menu.setStyle({
						mask: 'rgba(0,0,0,0)'
					}); //menu设置透明遮罩防止点击
					menu.show('none', 0, function() {
						//主窗体开始侧滑并显示遮罩
						mainWebview.setStyle({
							mask: 'rgba(0,0,0,0.4)',
							left: '70%',
							transition: {
								duration: 150
							}
						});
						mui.later(function() {
							isInTransition = false;
							menu.setStyle({
								mask: "none"
							}); //移除menu的mask
						}, 160);
						showMenu = true;
					});
				}
			};
			/**
			 * 关闭菜单
			 */
			function closeMenu() {
				if(isInTransition) {
					return;
				}
				if(showMenu) {
					//关闭遮罩；
					//主窗体开始侧滑；
					isInTransition = true;
					mainWebview.setStyle({
						mask: 'none',
						left: '0',
						transition: {
							duration: 200
						}
					});
					showMenu = false;
					//等动画结束后，隐藏菜单webview，节省资源；
					mui.later(function() {
						isInTransition = false;
						menu.hide();
					}, 300);
				}
			};
			//点击左上角侧滑图标，打开侧滑菜单；
			document.querySelector('#bars-bars').addEventListener('tap', function(e) {
				if(showMenu) {
					closeMenu();
				} else {
					openMenu();
				}
			});
			//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
			window.addEventListener("swiperight", openMenu);
			//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
			window.addEventListener("swipeleft", closeMenu);
			//侧滑菜单触发关闭菜单命令
			window.addEventListener("menu:close", closeMenu);
			window.addEventListener("menu:open", openMenu);
			
			navBarListener();
			// 设置子webview对象
			for (var i = 0 ; i < pageArray.length ; i ++) {
				var subPage = plus.webview.create(pageArray[i].pageUrl, 
													pageArray[i].pageId,
													subPageStyle);
				// 隐藏webview窗口
				subPage.hide();
				// 追加每一个子页面到当前主页面
				mainWebview.append(subPage);
			}
			plus.webview.show(pageArray[0].pageId);
		});
		
		function navBarListener(){
			mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){
				var baritem = this;
				var tabindex= this.getAttribute("tabindex");
				console.log("tabindex======="+tabindex);
				
				// 显示点击的tab选项所对应的页面
				plus.webview.show(pageArray[tabindex].pageId, "fade-in", 200);
				// 隐藏其他的不需要的页面
				for (var i = 0 ; i < pageArray.length ; i ++) {
					if (i != (tabindex)) {
						// console.log("iiiiii========"+i);
						plus.webview.hide(pageArray[i].pageId, "fade-out", 200);
					}
				}
			});
		};
		//初始化
		function initIndexView(){
			//初始化所子webview
			initSubWebviews();
			//添加bar点击事件接受
			// tapBaritem();
		}
		function initSubWebviews(){
			
		}
		//首页返回键处理
		//1、若侧滑菜单显示，则关闭侧滑菜单
		//2、否则，执行mui框架默认的关闭首页功能
		var _back = mui.back;
		mui.back = function() {
			if(showMenu) {
				// console.log("反水");
				closeMenu();
			} else {
				_back();
			}
		};
		///退出关闭
// 		mui.oldback = mui.back;
// 			var clickNum = 0;
// 			mui.back = function(event){
// 			   clickNum++;
// 			   if(clickNum > 1){
// 			       plus.runtime.quit();
// 			   }else{
// 			       mui.toast("再按一次退出应用.");
// 			   }
// 			   setTimeout(function(){
// 			       clickNum = 0
// 			   },1000);
// 			        return false;
// 			};
		document.getElementById("cart-icon").addEventListener('tap', function(e) {
				plus.webview.open('cart.html','cart.html');
				
			});
		</script>
		
		
	</body>

</html>
